<template>
    <div class="body">
        <VHeader title="活动详情" />
        <div class="title" v-text="info.teamName"></div>
        <div class="form">
            <div class="flex">
                <div class="left">活动描述</div>
                <div class="right" v-text="info.description"></div>
            </div>
            <div class="flex">
                <div class="left">活动日期</div>
                <div class="right" v-text="info.activityTime"></div>
            </div>
            <div class="flex">
                <div class="left">报名截止</div>
                <div class="right" v-text="info.endingTime"></div>
            </div>
            <div class="flex">
                <div class="left">活动天数</div>
                <div class="right" v-text="info.activityDays"></div>
            </div>
            <div class="flex">
                <div class="left">审核状态</div>
                <div class="right">
                    <span :class="'status- status-'+info.status">
                        {{info.status|activityStatus}}
                    </span>
                </div>
            </div>
            <div class="flex">
                <div class="left">招募人数</div>
                <div class="right" v-text="info.recruitNum"></div>
            </div>
            <div class="flex">
                <div class="left">详细地点</div>
                <div class="right"><span v-text="info.area"></span> <span v-text="info.village"></span> <span v-text="info.activityPlace"></span></div>
            </div>
            <div class="flex">
                <div class="left">联系人</div>
                <div class="right" v-text="info.contactName"></div>
            </div>
            <div class="flex last">
                <div class="left">联系电话</div>
                <div class="right"><a class="orange" :href="'tel:'+info.contactMobile" v-text="info.contactMobile"></a></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Feedback",
        data(){
            return {
                info: {},
            }
        },
        methods:{
            async get(){
                let res = await this.$http({
                    method: 'api.team.activityDetail',
                    id: this.$route.params.id,
                });
                this.info = res.data.info;
            }
        },
        created() {
            this.get();
        }
    };
</script>

<style lang="scss" scoped>
    .body {
        font-size: 14px;
    }
    .title {
        font-size: 150%;
        padding: 0.3rem 0.3rem;
        border-bottom: 1px solid #378EEF;
        text-align: center;
    }
    .form {
        padding:0 0.3rem;
        > .flex {
            padding: 0.1rem 0;
            border-bottom: 1px dashed #CCC;
            &.last {
                margin-bottom: .3rem;
                border: 0;
            }
        }
        .left {
            min-width: 60px;
            padding: 10px;
        }
        .right {
            padding: 10px;
            flex-grow: 1;
            input {
                line-height: 30px;
            }
            input, textarea {
                width:100%;
                border: 1px solid #e3e3e3;
            }
        }
    }
    .buttons {
        margin-top: 0.5rem;
        .apply {
            border:0;
            color: white;
            font-size: 130%;
            padding: 0.2rem 0;
            width: 85%;
            border-radius: 4px;
            background-color: #F65D5D;
        }
    }
    .orange {
        color: #EE6F2D
    }
    .status- {
        min-width: 40px;
        border-radius: .16rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: .32rem;
        padding: 0 .2rem;
        margin-right: .32rem;
    }
    .status-0{
        background: #b5bbbe;
    }
    .status-1{
        background: #FFA518;
    }
    .status-2{
        background: #378EEF;
    }
    .status-3{
        background: #0A930A;
    }
    .status-4{
        background: #F65D5D;
    }
</style>